<template>
  <div class="haobei" style="height: 100vh;width: 100%;">
    <dao title="设备详情" color="#fff"  />
<view class="box">
  <view class="left_box">
<view class="title">本机数据</view>
<view>
<view class="bi">
  
  <text style="margin-right: 20rpx

;color: #fff;">日环比</text>

<!-- 上升 -->
<view class="buju" v-if="detData?.DODGrowthRate>0">
  <text>+{{detData.DODGrowthRate}}%</text> 

<image class="imgs"
  src="../../static/image/up.png"
  mode="scaleToFill"
/>

</view>
<!-- 未变化 -->
<view class="buju" v-if="detData?.DODGrowthRate===0 ">
  <text>{{detData.DODGrowthRate}}%</text> 

</view>

<!-- 下降 -->

<view class="buju" v-if="detData?.DODGrowthRate<0">
  <text style="margin-left: 8rpx;"> {{detData.DODGrowthRate}}%</text> 
  <image class="imgs"
  src="../../static/image/down.png"
  mode="scaleToFill"
/>
</view>
 </view>
 <view class="bi"><text style="margin-right: 20rpx;
color: #fff;">周环比</text>

<!-- 上升 -->
<view class="buju" v-if="detData?.WOWGrowthRate>0">
  <text>+{{detData.WOWGrowthRate}}%</text> 

<image class="imgs"
  src="../../static/image/up.png"
  mode="scaleToFill"
/>

</view>
<!-- 未变化 -->
<view class="buju" v-if="detData?.WOWGrowthRate===0 ">
  <text>{{detData.WOWGrowthRate}}%</text> 

</view>

<!-- 下降 -->

<view class="buju" v-if="detData?.WOWGrowthRate<0">
  <text  style="margin-left: 8rpx;">{{detData.WOWGrowthRate}}%</text> 
  <image class="imgs"
  src="../../static/image/down.png"
  mode="scaleToFill"
/>
</view>
 </view>
</view>
  </view>
 <view class="right_box">
 <view>
  <p class="titles"> 本机总分饭次数</p>
  
  <p class="cet">{{ detData.TotalMealServed }}</p>
 </view>
<view>
  <p class="titles">本机总分饭克重</p>
  
  <p class="cet">{{ detData.SumOfMealsWeight }}<text 
    style="font-size:24rpx;">
    /克
  </text></p>
</view>
</view>



  
</view>
<view v-if="detData" style="margin-top: 150rpx;margin: 20rpx;">


  
<view>
  <p class="xidfs">设备名称</p>
  <view class="badc">{{detData.Name}}</view>
  
</view>

<view>
  <p class="xidfs">序列号</p>
  <view class="badc">{{detData.SerialNumber}}</view>
  
</view>

<view>
  <p class="xidfs">类别</p>
  <view class="badc">{{detData.Type}}</view>
  
</view>

<view>
  <p class="xidfs">安装位置</p>
  <view class="badc">{{detData.Position}}</view>
  
</view>

<button class="brn" @click="submit">修改信息</button>

</view>
  </div>
</template>

<script setup >
import dao from "../../pages/conpments/daohang.vue";
import {getDedail} from '../../api/login'

import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";

import {
  ref,
  onMounted,
  inject,
  getCurrentInstance,
  reactive,
  computed,
} from "vue";
let detData=ref({
  DODGrowthRate: undefined,
Id: '',
Name: "",
Position: "",
SerialNumber: "",
SumOfMealWeight: 0,
TotalMealServed: 0,
Type: "",
WOWGrowthRate:0
})

const submit=()=>{
  uni.navigateTo({
      url: "/subpkg/dati/index",
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit("acceptDataFromOpenerPage", {
          data: detData.value,
          title:'确认修改'
        });
      },
    });
}

let idsss = ref()

onLoad((option)=>{
  idsss.value=option.id
})
onShow(()=>{
  getda()

})
onMounted(()=>{
  console.log('进来了sonMounted');
})
let  getda= async ()=>{
  const {data}= await getDedail(idsss.value)
   detData.value=data.data
   console.log('显示了');
   console.log(detData.value);
}
</script>

<style lang="scss" scoped>

.box{
  display: flex;
  justify-content: space-around;
  padding-top: 30rpx;
  height: 300rpx;
  background: rgba(0, 99, 157, 0.4);
  border-radius: 10rpx;
margin: 20rpx;
box-sizing: border-box;
  .left_box, .right_box{
    box-sizing: border-box;
    padding: 30rpx;
flex: 1;

  backdrop-filter: blur(20px);
}
.left_box{display: flex;flex-direction: column;
justify-content: space-between;
padding-right: 0;

.bi{
  width: 100%;
  color: #ffffff;
display: flex;
align-items: center;

.buju{
  display: flex;
align-items: center;
font-size: 26rpx;
}
}}
.imgs{
  width: 50rpx;height: 50rpx;
}
.title{font-size:40rpx;
color: #fff;font-weight: 600;}
}
.titles{
  color: #fff;
}
.cet{
  font-size: 40rpx;
  font-weight: 600;
  ;color: #fff;
}
.right_box{display: flex; flex-direction:column;
justify-content: space-between;}

.xidfs{
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: 600;
}
.badc{
  width: 100%;
  display: flex;

align-items: center;
color: #fff;
font-size: 30rpx;
padding: 20rpx;
box-sizing: border-box;
  height: 100rpx;border-radius: 10rpx;
  background: rgba(73, 130, 163, 0.4);

}
::v-deep .brn {
  margin-top: 60rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe);
}
</style>